<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=1024, user-scalable=no">

  <title>Your deck.js Presentation</title>

  <!-- Required stylesheet -->
  <link rel="stylesheet" media="screen" href="core/deck.core.css">

<!-- Extension CSS files go here. Remove or add as needed. -->
<link rel="stylesheet" media="screen" href="extensions/goto/deck.goto.css">
<link rel="stylesheet" media="screen" href="extensions/menu/deck.menu.css">
<link rel="stylesheet" media="screen" href="extensions/navigation/deck.navigation.css">
<link rel="stylesheet" media="screen" href="extensions/status/deck.status.css">
<link rel="stylesheet" media="screen" href="extensions/scale/deck.scale.css">

<!-- Style theme. More available in /themes/style/ or create your own. -->
<link rel="stylesheet" media="screen" href="themes/style/web-2.0.css">

<!-- Transition theme. More available in /themes/transition/ or create your own. -->
<link rel="stylesheet" media="screen" href="themes/transition/horizontal-slide.css">

<!-- Basic black and white print styles -->
<link rel="stylesheet" media="print" href="core/print.css">

<!-- Required Modernizr file -->
<script src="modernizr.custom.js"></script>
<style>
  .demoimage{float:right;width:40%;height: 90%;overflow:auto;margin-right: 50px}
</style>
</head>
<body>
  <div class="deck-container">

    <!-- Begin slides. Just make elements with a class of slide. -->

    <section class="slide">
      <h1>jQuery</h1>
    </section>

    <section class="slide">
      <div class="deck-slide-scaler" style="transform: scale(0.996677740863787);">
        <h3>课程回顾</h3>
        <h3>实践内容回顾</h3>
        <h3>jQuery选择器与包装对象(jQuery Object)</h3>
        <h3>$函数</h3>
        <h3>jQuery事件处理中的event与this</h3>
      </div>
    </section>

    <section class="slide">
      <div class="deck-slide-scaler" style="transform: scale(0.996677740863787);">
        <h2>课程回顾</h2>
        <ol>
          <li><h3>直接用DOM API操作有什么困难?</h3></li>
          <li><h3>jQuery的好处</h3></li>
          <li><h3>jQuery选择器</h3></li>
          <li><h3>jQuery设置单击事件 </h3></li>
          <li><h3>jQuery读取或设置样式</h3></li>
          </ol>
        </div>
    </section>
    <section class="slide">
      <div class="demoimage">
        <div><img src="exercise/03/popupdivshadow1.png"/></div>
      </div>
      <div class="deck-slide-scaler" style="transform: scale(0.996677740863787);">
        <h2>实践1：用jQuery显示弹出层</h2>
        <ol>
          <li><h3>把层直接显示到界面上</h3>
          <p><xmp>
            .select{
            border-bottom: 1px solid blue;
            color: red;
            background: url(../images/nav_click.png) 97% no-repeat;
            background-size: 1.4rem 1.4rem;
            }
          </xmp></p>
          </li>
          <li><h3>单击相应区域显示或隐藏该按钮(jQuery)做法</h3>
            <p>onclick<br>
              node.addEventListener("click",function(){});<br>
              div.style.display="block";//none
              div.style.height="300px";//3rem;
            </p>
          </li>
        </ol>
      </div>
    </section>
    <section class="slide">
    <div class="deck-slide-scaler" style="transform: scale(0.996677740863787);">
      <h2>实践2：显示遮罩</h2>
      <ol>
        <li><h3>试试看把遮罩层直接显示到界面上?</h3>
        </li>
        <li><h3>采用jQuery方式</h3>
          <p>请参考<a href="http://hemin.cn/jq/cheatsheet.html">jQuery 1.11.1速查表/jQuery中文手册</a>,找找看采用那个函数来确定遮罩的top属性？</p>
        </li>
      </ol>
    </div>
    </section>

    <section class="slide">

      <div class="deck-slide-scaler" style="transform: scale(0.996677740863787);">
        <h2>jQuery选择器也兼容 CSS3 新增的选择器</h2>
        <ol>
          <li>E[foo^="bar"]</li>
          <li>E[foo*="bar"]</li>
          <li>E[foo$="bar"]</li>
          <li>E[:disabled]</li>
          <li>E[:enabled]</li>
          <li>E[:last-child]</li>
          <li>E[:first-child]</li>
          <li>E[:nth-child(n)]</li>
        </li>
        </ol>
      </div>
    </section>

    <section class="slide">
      <div class="deck-slide-scaler" style="transform: scale(0.996677740863787);">
        <h2>jQuery包装对象(jQuery Object)</h2>
        <ol>
          <li>筛选:过滤与查找</li>
          <li>与Dom对象之间的转换</li>
          <li>eq(n)</li>
          <li>$(dom)</li>
          <li>$(...)[n]</li>
          <li>$.get(n)</li>
        </ol>
      </div>
    </section>

    <section class="slide">
      <div class="deck-slide-scaler" style="transform: scale(0.996677740863787);">
        <h2>$函数</h2>
        <ol>
          <li>语义网(Semantics)</li>
          <li>设备访问(Data Access)</li>
          <li>离线和存储(Offline & Storage)</li>
          <li>通信(Connectivity)</li>
          <li>多媒体(Multimedia)</li>
          <li>图形和特效(Graphics & Effects)</li>
          <li>性能和集成(Performance & Integration)</li>
          <li>呈现(CSS3/styling)</li>
        </ol>
        <ol>
          <p>留意<a href="www.html5test.com">www.HTML5test.com</a>，看看各自的浏览器能得多少分？</p>
          <li>例子演示</li>
          <li><a href="http://www.ithome.com/html/ie/109944.htm">HTML5刚刚成为公开的规范啦</a></li>
        </ol>
      </div>
    </section>




    <section class="slide">
      <h1>Thanks, You're dismissed!</h1>
    </section>


    <!-- End slides. -->

    <!-- Begin extension snippets. Add or remove as needed. -->

    <!-- deck.navigation snippet -->
    <div aria-role="navigation">
      <a href="#" class="deck-prev-link" title="Previous">&#8592;</a>
      <a href="#" class="deck-next-link" title="Next">&#8594;</a>
    </div>

    <!-- deck.status snippet -->
    <p class="deck-status" aria-role="status">
      <span class="deck-status-current"></span>
      /
      <span class="deck-status-total"></span>
    </p>

    <!-- deck.goto snippet -->
    <form action="." method="get" class="goto-form">
      <label for="goto-slide">Go to slide:</label>
      <input type="text" name="slidenum" id="goto-slide" list="goto-datalist">
      <datalist id="goto-datalist"></datalist>
      <input type="submit" value="Go">
    </form>

    <!-- End extension snippets. -->
  </div>

<!-- Required JS files. -->
<script src="jquery-1.11.3.js"></script>
<script src="core/deck.core.js"></script>

<!-- Extension JS files. Add or remove as needed. -->
<script src="extensions/menu/deck.menu.js"></script>
<script src="extensions/goto/deck.goto.js"></script>
<script src="extensions/status/deck.status.js"></script>
<script src="extensions/navigation/deck.navigation.js"></script>
<script src="extensions/scale/deck.scale.js"></script>

<!-- Initialize the deck. You can put this in an external file if desired. -->
<script>
  $(function() {
    $.deck('.slide');
  });
</script>
</body>
</html>
